import React, { useEffect } from 'react';

// 饼图组件

import * as echarts from 'echarts';

import Pts from 'prop-types'
// 定义一个饼图组件
const Pie = (props) => {
	// console.log('props',props);
	//  useEffect 执行时机
	useEffect(() => {
		var chartDom = document.getElementById(props.id);
		// console.log('chartDom',chartDom);
		var myChart = echarts.init(chartDom);  // 报错的问题在这inirvaid dom
		let options = {
			title: {
				text: props.title,
				// subtext: 'Fake Data',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			// legend: {	// 图例
			// 	orient: 'vertical',
			// 	left: 'left'
			// },
			series: [
				{
					name: props.name,
					type: 'pie',
					radius: '50%',
					data: props.data,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		}
		// 是否添加图例
		if(props.lengend){
			options.legend =  {orient:'vertical',left:'left'} 
		}
		 
		myChart.setOption(options)

	},[props.data, props.id, props.lengend, props.name, props.title])

	return (
		<div id={props.id} style={{ width: props.w, height: props.h }}>

		</div>
	);
}

// 设置参数限制
Pie.propTypes = {
	title:Pts.string.isRequired,	// 主题
	data:Pts.array.isRequired,		// 接受的数据
	lengend:Pts.bool.isRequired,	// 是否展示图例
	name:Pts.string.isRequired,
}

// 设置默认值
Pie.defaultProps = {
	w: '33.3%',
	h: '300px'
}


export default Pie;
